<template>
  <div class="login-container">
    <div class="login-content">
      <el-divider class="header-title">声明</el-divider>
      <div class="statement">{{ statement }}</div>
      <el-divider class="header-title">公告</el-divider>
      <div class="notice">{{ notice }}</div>
      <el-form @submit.native.prevent ref="loginForm" :model="loginForm" :rules="rules" class="login-form">
        <el-form-item prop="secretKey" label="密钥">
          <el-input v-model="loginForm.secretKey" show-password type="password" placeholder="请输入密钥">
          </el-input>
        </el-form-item>
        <el-form-item prop="rememberMe">
          <el-checkbox v-model="loginForm.rememberMe">记住密钥</el-checkbox>
        </el-form-item>
        <el-form-item>
          <div class="login-form-button">
            <el-button class="login-item flex-1" :loading="loading" type="primary" @click="login">
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>
            <el-button type="primary" @click="query">查询</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <SecretKeyInfo ref="secretKeyInfo" />
  </div>
</template>

<script>
import { getSecretKeyInfo, loginBySecretKey } from '@/api/login';
export default {
  name: 'Login',
  data() {
    return {
      statement: `不得将本产品用于任何非法用途;因此由此产生的后果由您自行承担。`,
      notice: ``,
      loginForm: {
        secretKey: '',
        rememberMe: false
      },
      rules: {
        secretKey: [{ required: true, trigger: 'blur', message: '秘钥不能为空' }],
      },
      loading: false,
    };
  },
  components: {
    SecretKeyInfo: resolve => require(['./secretKeyInfo.vue'], resolve),
  },
  computed: {},
  created() {
    // 页面加载时读取保存的凭据
    this.loadSavedCredentials();
  },
  methods: {
    // 加载已保存的用户名和密码
    loadSavedCredentials() {
      const rememberMe = localStorage.getItem('rememberMe') === 'true';
      if (rememberMe) {
        this.loginForm.secretKey = localStorage.getItem('secretKey');;
        this.loginForm.rememberMe = true;
      }
    },
    query() {
      getSecretKeyInfo(this.loginForm).then(res => {
        if (res.code == 200) {
          this.$refs.secretKeyInfo.open(res.result);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    login() {
      if (this.loading) {
        return
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          loginBySecretKey(this.loginForm).then(res => {
            this.loading = false;
            if (res.code == 200) {
              this.$message.success("登录成功");
              if (this.loginForm.rememberMe) {
                localStorage.setItem('secretKey', this.loginForm.secretKey);
                localStorage.setItem('rememberMe', 'true');
              } else {
                this.clearSavedCredentials();
              }
              this.$router.push({ path: '/home' });
            } else {
              this.$message.error(res.msg);
            }
          }).catch(error => {
            this.loading = false;
          });
        }
      });
    },
    // 清除保存的凭据
    clearSavedCredentials() {
      localStorage.removeItem('secretKey');
      localStorage.setItem('rememberMe', 'false');
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.header-title {
  ::v-deep .el-divider__text {
    font-size: 20px;
    font-weight: 600;
  }
}

.login-content {
  display: flex;
  flex-direction: column;
  padding: 40px 30px;
  height: max-content;
  box-shadow: 0px 2px 20px 0px rgba(59, 102, 255, 0.36);
  border-radius: 4px;
  border: 1px solid var(--color-border-first);
  background: #ffffff;
  width: 900px;

  .statement {
    font-size: 16px;
    color: red;
    padding: 10px 0px;
    font-weight: bolder;
  }

  .notice {
    font-size: 16px;
    line-height: 30px;
    text-indent: 32px;
    padding: 10px 0px;
    font-weight: bolder;
  }

  .login-form {
    padding: 25px 0px 10px 0px;

    ::v-deep .el-input {
      font-size: 16px;

      input {
        height: 48px;
        line-height: 48px;
      }

      .el-input__suffix {
        line-height: 48px;
      }
    }

    .input-icon {
      height: 40px;
      width: 16px;
      margin-left: 2px;
      margin-top: -2px;
      color: #b3b3b3;
    }

    .login-form-button {
      display: flex;
      width: 100%;

      .el-button {
        padding: 12px 14px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

}
</style>
